import Phaser from 'phaser';

import UtilsLoader from '../../../utils/Utils.loader/UtilsLoader';
import UtilsCoordinateConter from '../../../utils/Utils.coordinate.conter/UtilsCoordinateConter';
import SaveSceneExampleQueue from '../../../utils/Utils.SaveSceneExampleQueue/UtilsSaveSceneExampleQueue';
import UtilsGrid from '../../../utils/Utils.Grid/UtilsGrid';
import { UtilsGroupChildren } from '../../../utils/Utils.Group/UtilsGroup';
import { KnapsackShell } from '../../../utils/Utils.SingletonShell/UtilsSingletonShell';
import { Graphical } from '../../../utils/Utils.Graphical/UtilsGraphical';

export default class SceneUiKnap extends Phaser.Scene {
    constructor() {
        super({
            key: 'SceneUiKnap'
        });

        this.knapVisible = false;
        this.knapsack = null;
        this.gridEquipDataGroup = null;

        this.WWC = UtilsCoordinateConter.coordinatrConter('world').WWC;
        this.WHC = UtilsCoordinateConter.coordinatrConter('world').WHC;
        this.WFW = UtilsCoordinateConter.coordinatrConter('worldFull').WFW;
        this.WFH = UtilsCoordinateConter.coordinatrConter('worldFull').WFH;
        this.VWC = UtilsCoordinateConter.coordinatrConter('view').VWC;
        this.VHC = UtilsCoordinateConter.coordinatrConter('view').VHC;
        this.VFW = UtilsCoordinateConter.coordinatrConter('viewFull').VFW;
        this.VFH = UtilsCoordinateConter.coordinatrConter('viewFull').VFH;
    }

    init() {
        console.log('SceneUiKnap init!');

        SaveSceneExampleQueue.enQueue({
            'SceneUiKnap': this
        });
    }

    preload() {
        console.log('SceneUiKnap pre!');

        this.IMAGE_LOAD();
    }

    create() {
        console.log('SceneUiKnap create!');

        this.knapsack = this.add.image(this.VWC, this.VHC, 'knapsack')
        .setInteractive()
        .setVisible(this.knapVisible);

        this.GRAPHICAL_DRAW();

        this.onClick();
    }

    IMAGE_LOAD() {
        new UtilsLoader('image', [{
            key: 'knapsack',
            path: '/images/phaser/knapsack.png'
        }, {
            key: 'clothingEquip',
            path: '/images/phaser/clothingEquip.png'
        }, {
            key: 'helmetEquip',
            path: '/images/phaser/helmetEquip.png'
        }], 'http://localhost:3001', this, (e) => {
            console.log(e);
        });
    }

    onClick() {
        // on knap...
        this.knapClose.on('pointerdown', () => {
            this.events.emit('onCloseKnapsack', '关闭背包!');
        })
    }

    onGetEquip(_data) {

        this.gridEquipDataGroup = this.add.existing(new UtilsGroupChildren(_data, this));

        new UtilsGrid({
            w: 6,
            h: 6,
            cw: 36,
            ch: 36,
            x: this.VWC - this.knapsack.width / 2 + 34,
            y: this.VHC - this.knapsack.height / 2 + 70
        }, this.gridEquipDataGroup, this);
    }

    onRemoveEquip() {
        this.gridEquipDataGroup.destroy(true, true);
        delete KnapsackShell.instance;
    }

    GRAPHICAL_DRAW() {
        this.add.existing(new Graphical({
            path: false,
            style: {
                col: 0xff0000,
                alp: .5
            },
            rec: {
                x: this.VWC - this.knapsack.width / 2 + 210,
                y: this.VHC - this.knapsack.height / 2 + 36,
                w: 20,
                h: 20
            },
            gen: {
                genKey: 'knapClose',
                w: 20,
                h: 20
            },
            vis: true,
            des: true
        }, this));

        this.knapClose = this.physics.add.staticSprite(this.VWC - this.knapsack.width / 2 + 210, this.VHC - this.knapsack.height / 2 + 36, 'knapClose')
        .setInteractive()
        .setVisible(this.knapVisible);
    }

}